<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识图谱管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1><i class="bi bi-diagram-3"></i> 知识图谱管理系统</h1>
                    <p class="mb-0">Knowledge Graph Management System</p>
                </div>
                <div class="col-md-6">
                    <div class="search-container">
                        <div class="input-group">
                            <input type="text" class="form-control" id="searchInput" placeholder="搜索知识点...">
                            <button class="btn btn-outline-light" type="button" id="searchBtn">
                                <i class="bi bi-search"></i>
                            </button>
                            <button class="btn btn-outline-light" type="button" id="clearSearchBtn">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <!-- 统计信息和控制面板 -->
        <div class="stats-panel">
            <div class="row text-center">
                <div class="col-md-2">
                    <div class="stat-item">
                        <h5>知识点总数</h5>
                        <span id="itemCount" class="stat-number text-primary">0</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stat-item">
                        <h5>关系总数</h5>
                        <span id="relationCount" class="stat-number text-success">0</span>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="control-panel">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addItemModal">
                            <i class="bi bi-plus-circle"></i> 添加知识点
                        </button>
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addRelationModal">
                            <i class="bi bi-arrow-left-right"></i> 添加关系
                        </button>
                        <button class="btn btn-info btn-sm" onclick="refreshGraph()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新图谱
                        </button>
                        <button class="btn btn-warning btn-sm" onclick="resetGraphLayout()">
                            <i class="bi bi-diagram-2"></i> 重置布局
                        </button>
                        <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#dataListModal">
                            <i class="bi bi-list-ul"></i> 数据列表
                        </button>
                        <button class="btn btn-danger btn-sm me-2" data-bs-toggle="modal" data-bs-target="#textAnalysisModal">
                            <i class="bi bi-magic"></i> 智能构建
                        </button>
                        <button type="button" class="btn btn-warning btn-sm" onclick="clearAllData()">
                            <i class="bi bi-trash3"></i> 清空数据
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 知识图谱展示区域 -->
        <div class="graph-container">
            <div id="knowledgeGraph" class="graph-chart"></div>
            <div class="graph-info" id="graphInfo">
                <div class="info-item">
                    <strong>操作提示：</strong>
                    <ul>
                        <li>拖拽节点调整位置</li>
                        <li>点击节点查看详情</li>
                        <li>使用搜索框查找知识点</li>
                        <li>滚轮缩放图谱</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <!-- 添加知识点模态框 -->
        <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="addItemModalLabel">
                            <i class="bi bi-plus-circle"></i> 添加知识点
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="itemForm">
                            <div class="form-group mb-3">
                                <label for="itemName" class="form-label">知识点名称:</label>
                                <input type="text" class="form-control" id="itemName" placeholder="请输入知识点名称" required>
                            </div>
                            <div id="itemMessage"></div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="itemForm" class="btn btn-primary">添加知识点</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加关系模态框 -->
        <div class="modal fade" id="addRelationModal" tabindex="-1" aria-labelledby="addRelationModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="addRelationModalLabel">
                            <i class="bi bi-arrow-left-right"></i> 添加关系
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="relationForm">
                            <div class="form-group mb-3">
                                <label for="sourceItem" class="form-label">源知识点:</label>
                                <select class="form-select" id="sourceItem" required>
                                    <option value="">请选择源知识点</option>
                                </select>
                            </div>
                            <div class="form-group mb-3">
                                <label for="targetItem" class="form-label">目标知识点:</label>
                                <select class="form-select" id="targetItem" required>
                                    <option value="">请选择目标知识点</option>
                                </select>
                            </div>
                            <div class="form-group mb-3">
                                <label for="relationType" class="form-label">关系类型:</label>
                                <select class="form-select" id="relationType">
                                    <option value="related_to">相关</option>
                                    <option value="is_a">是一个</option>
                                    <option value="part_of">属于</option>
                                    <option value="contains">包含</option>
                                    <option value="depends_on">依赖于</option>
                                    <option value="similar_to">相似于</option>
                                </select>
                            </div>
                            <div class="form-group mb-3">
                                <label for="description" class="form-label">关系描述:</label>
                                <textarea class="form-control" id="description" rows="2" placeholder="可选：描述这个关系"></textarea>
                            </div>
                            <div id="relationMessage"></div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="relationForm" class="btn btn-success">添加关系</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据列表模态框 -->
        <div class="modal fade" id="dataListModal" tabindex="-1" aria-labelledby="dataListModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title" id="dataListModalLabel">
                            <i class="bi bi-list-ul"></i> 数据列表
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">知识点列表</h6>
                                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                    <table class="table table-striped table-sm">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="modalItemsList">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-success">关系列表</h6>
                                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                    <table class="table table-striped table-sm">
                                        <thead>
                                            <tr>
                                                <th>源知识点</th>
                                                <th>关系</th>
                                                <th>目标知识点</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="modalRelationsList">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 智能文本分析模态框 -->
        <div class="modal fade" id="textAnalysisModal" tabindex="-1" aria-labelledby="textAnalysisModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title" id="textAnalysisModalLabel">
                            <i class="bi bi-magic"></i> 智能构建知识图谱
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="analysisText" class="form-label">
                                <strong>输入文本内容：</strong>
                                <small class="text-muted">（系统将自动分析文本并提取知识点和关系）</small>
                            </label>
                            <textarea class="form-control" id="analysisText" rows="8" 
                                placeholder="请输入您想要分析的文本，支持段落处理和多种关系识别：

📝 支持的文本类型：
• 人物传记和履历
• 科技产品介绍  
• 企业发展历程
• 学术研究描述
• 新闻报道内容

💡 提示：系统会自动识别各种关系类型，包括显式关系词、动词关系、修饰关系等。"></textarea>
                        </div>
                        
                        <!-- 关系标准化选项 -->
                        <!-- <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="normalizeRelations" checked>
                                <label class="form-check-label" for="normalizeRelations">
                                    <strong>标准化关系类型</strong>
                                    <small class="text-muted d-block">开启时：'出生于' → 'born_in'；关闭时：保持原始关系词</small>
                                </label>
                            </div>
                        </div> -->
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-outline-primary w-100" onclick="extractTriplets()">
                                    <i class="bi bi-search"></i> 预览三元组
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger w-100" onclick="buildKnowledgeGraph()">
                                    <i class="bi bi-magic"></i> 构建知识图谱
                                </button>
                            </div>
                        </div>
                        
                        <!-- 三元组预览区域 -->
                        <div id="tripletsPreview" class="mb-3" style="display: none;">
                            <h6 class="text-primary">
                                <i class="bi bi-diagram-2"></i> 提取的三元组预览：
                            </h6>
                            <div class="border rounded p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
                                <div id="tripletsContent"></div>
                            </div>
                        </div>
                        
                        <!-- 处理结果显示区域 -->
                        <div id="analysisResult"></div>
                        
                        <!-- 示例文本 -->
                        <div class="mt-3">
                            <h6 class="text-secondary">
                                <i class="bi bi-lightbulb"></i> 示例文本：
                            </h6>
                            <div class="example-texts">
                                <button class="btn btn-outline-secondary btn-sm me-2 mb-2" onclick="setExampleText(1)">
                                    📊 大数据基础概念
                                </button>
                                <button class="btn btn-outline-secondary btn-sm me-2 mb-2" onclick="setExampleText(2)">
                                    🐍 数据科学技术栈
                                </button>
                                <button class="btn btn-outline-secondary btn-sm me-2 mb-2" onclick="setExampleText(3)">
                                    🔧 大数据平台工具
                                </button>
                                <button class="btn btn-outline-secondary btn-sm me-2 mb-2" onclick="setExampleText(4)">
                                    💡 数据科学应用
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
